<template>
  <el-timeline class="timeline">
    <el-timeline-item class="w-100%" v-for="group in timelineData" :key="group.date">
      <template #default>
        <div class="timeline-group">
          <!-- 日期显示 -->
          <div class="timeline-date">
            <el-button type="text" @click="toggleGroup(group.date)">
              {{ group.date }}
              <!-- <span>{{ expandedGroups.includes(group.date) ? '▲' : '▼' }}</span> -->
            </el-button>
          </div>
          <!-- <div v-if="expandedGroups.includes(group.date)"> -->
          <div>
            <div v-for="record in group.data" :key="record.id" class="timeline-item">
              <!-- 时间显示 -->
              <div class="item-left">
                <span class="item-time">{{ record.create_time }}</span>
              </div>
              <!-- 事件内容 -->
              <div class="item-right">
                <h4>{{ record.title }}</h4>
                <el-card shadow="always" class="record-card">
                  <!-- 主体内容 -->
                  <div class="card-body">
                    <div class="extra-info">
                      <!-- 使用 span 标签包裹 operate_name 并应用样式 -->
                      <span class="operate-name">{{ record.operate_name }}</span>
                      <!-- 使用 span 标签包裹 operate 并应用样式 -->
                      <span class="operate">({{ record.operate }})</span>
                      <!-- msg 单独一行 -->
                      <p class="msg">{{ record.msg }}</p>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-timeline-item>
  </el-timeline>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import { getOperationLogApi } from '@/api/customer'

const props = defineProps({
  id: {
    type: Number
  }
})

// 时间轴记录数据
const timelineData = ref()
const fetchData = async () => {
  const data = await getOperationLogApi({
    id: props.id
  })
  return (timelineData.value = data.data.list)
}

// 保存展开的分组
const expandedGroups = ref<string[]>([])

// 保存展开的卡片
const expandedCards = ref<number[]>([])

// 切换分组展开状态
const toggleGroup = (date: string) => {
  if (expandedGroups.value.includes(date)) {
    expandedGroups.value = expandedGroups.value.filter((d) => d !== date)
  } else {
    expandedGroups.value.push(date)
  }
}

// 切换卡片展开状态
const toggleCard = (id: number) => {
  if (expandedCards.value.includes(id)) {
    expandedCards.value = expandedCards.value.filter((cardId) => cardId !== id)
  } else {
    expandedCards.value.push(id)
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.timeline-group {
  display: flex;
  flex-direction: column;
}

.timeline-date {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.item-left {
  width: 100px;
  padding-right: 15px;
  font-size: 14px;
  color: #666;
  text-align: right;
}

.item-right {
  flex: 1;
}

.item-time {
  display: inline-block;
  padding: 4px 8px;
  background-color: #f3f3f3;
  border-radius: 4px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.header-left {
  display: flex;
  align-items: center;
}

.creator-info {
  margin-left: 10px;
}

.creator-name {
  font-weight: bold;
}

.create-time {
  font-size: 12px;
  color: #888;
}

.operate-name {
  margin-right: 5px; /* 与 operate 之间的间距 */
  font-weight: bold; /* 加粗 */
  color: #000; /* 黑色字体 */
}

.operate {
  color: #999; /* 灰色字体 */
}

.msg {
  margin-top: 8px; /* 与上面内容的间距 */
}
</style>
